<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/nav.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/foot.css">
    <script src="../../boot/plugin/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
	<link rel="stylesheet" href="../../boot/plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="http://47.100.102.177:8080/app/plugin/jquery.min.js" charset="utf-8"></script>
	<script src="../../boot/plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js" charset="utf-8"></script>
    <title>实体书商品页</title>
</head>
<style>
	.form-group{
		top: 50px;
		position: absolute;
	}

	.thumbnail{
		position: relative;
		top: 80px;
		height: 380px;
		width: 250px;
	}

	.caption>h3{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 15px;
	}

	.caption>h3:hover{
		color: #0C0C0C;
	}

	.input-group{
		top: 70px;
		width: 550px;
		left: 300px;
	}

	.pagination{
		top: 100px;
		left: 370px;
		position: relative;
	}
	#car{
		left: 150px;
		top: 29px;
		width: 100px;
		font-size: 5px;
	}
	.caption>p{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 15px;
	}
</style>

<body>
	<div class="container">
		<div class='nav'>
			<ul>
				<li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
				<li><a>主页</a></li>
				<li><a href='#'>分类</a>
					<ul>
						<li><a href='../index01'>图书</a></li>
						<li><a href='../index02'>电子书</a></li>
					</ul>
				</li>
				<book:if test="${user!=null}">
					<li><a href='#'>${user.uname}</a>
						<ul>
							<li><a href='../car/shoppingcar?account=${user.account}'>购物车</a></li>
							<li><a href='../personal/center?status=1'>个人信息</a></li>
							<li><a href='../order/order'>订单信息</a></li>
						</ul>
					</li>
					<li><a href="/boot/users/exit">安全退出</a></li>
				</book:if>
				<li><a href='../login'>登陆</a></li>
				<li><a href='../login'>注册</a></li>
			</ul>
		</div>
		<form class="bs-example bs-example-form" role="form">
			<div class="row">
				<div class="col-lg-6">
					<div class="input-group">
						<input id="searchbook" type="text" class="form-control" placeholder="请输入书名...">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" onclick="search_book()">
								搜索
							</button>
							<button type="button" class="btn btn-info" onclick="searchPic()">搜索图片</button>
						</span>
					</div><!-- /input-group -->
				</div><!-- /.col-lg-6 -->
			</div><!-- /.row -->
		</form>
		<div class="container-fluid">
			<div class="row" id="books">
				<c:forEach items="${pageInfo.list}" var="p">
				<div class="col-md-3">
					<div class="thumbnail" onclick="sendBookId(this)">
						<input type="hidden" class="thisBookId" value="${p.bkId}">
						<img src="${p.pictureUrl}">
						<div class="caption">
							<h3 class="text-center text-success">${p.title}</h3>
							<p class="text-info text-center">${p.author}  出版时间：${p.date}  ${p.compay}</p>
							<p class="text-danger text-center" ><span style="color: red;font-size: 15px">￥<em style="font-style: normal">${p.price}</em></span></p>
						</div>
					</div>
					<div>
						<p class="pull-left">
							<button  type="button" id="car" onclick="add_cart(${p.bkId})" class="btn  btn-danger glyphicon  glyphicon-shopping-cart" >加入购物车
							</button>
						</p>
					</div>
				</div>
				</c:forEach>
			</div>
	</div>

		<ul class="pagination">
			<li><a href="javascript:next_page(1)">首页</a></li>

			<c:if test="${pageInfo.pageNum<=1}">
			<li class="disabled"><a>&laquo;</a></li>
			</c:if>

			<c:if test="${pageInfo.pageNum>1}">
			<li><a href="javascript:next_page(${pageInfo.pageNum-1})">&laquo;</a></li>
			</c:if>


			<%--    处理标签的begin--%>
			<c:if test="${pageInfo.pageNum+2>=pageInfo.pages}">
				<c:set var="startPage" value="${pageInfo.pages-2}"></c:set>
				<c:set var="endPage" value="${pageInfo.pages}"></c:set>
			</c:if>

			<c:if test="${pageInfo.pageNum+2<pageInfo.pages}">
				<c:set var="startPage" value="${pageInfo.pageNum}"></c:set>

				<c:set var="endPage" value="${pageInfo.pageNum+2}"></c:set>
			</c:if>

			<%--    处理一下end--%>

			<%--    处理标签分页--%>
			<c:forEach begin="${startPage<=0?1:startPage}" end="${endPage}" var="v">
				<%--        处理一下当前页的背景颜色--%>
			<c:if test="${pageInfo.pageNum==v}">
			<li class="active"><a href="javascript:next_page(${v})">${v}</a></li>
			</c:if>

			<c:if test="${pageInfo.pageNum!=v}">
			<li><a href="javascript:next_page(${v})">${v}</a></li>
			</c:if>

			</c:forEach>

			<c:if test="${pageInfo.pageNum>=pageInfo.pages}">
			<li class="disabled text-danger"><a>&raquo;</a></li>
			</c:if>

			<c:if test="${pageInfo.pageNum<pageInfo.pages}">
			<li><a href="javascript:next_page(${pageInfo.pageNum+1})">&raquo;</a></li>
			</c:if>

			<li><a href="javascript:next_page(${pageInfo.pages})">尾页</a></li>
			<li><a href="#" class="text-danger">当前页${pageInfo.pageNum}/${pageInfo.pages}总页</a></li>
		</ul>


    <!-- 定义尾部 -->
    <div class="foot">
		<!-- 多快好省start -->
	<div class="dkhs">
		<ul>
			<li><div class="duo"></div><p>品类齐全，轻松购物</p></li>
			<li><div class="kuai"></div><p>多仓直发，急速配送</p></li>
			<li><div class="hao"></div><p>正平行货，精致服务</p></li>
			<li><div class="sheng"></div><p>天天低价，畅选无忧</p></li>
		</ul>
	</div>
	<!-- 多快好省end -->

	<!-- 结尾start -->
	<div class="jiewei">
		<div class="j1">
			<ul>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">关于我们</a></li>
				<li class="line"></li>
				<li><a href="#">English</a></li>
				<li class="line"></li>
				<li><a href="#">Site</a></li>
				<li class="line"></li>
				<li><a href="#">Media & IR</a></li>
				<li class="line"></li>
			</ul>
		</div>
        <div class="j2">
            <p>云上书屋收录的免费书籍作品、频道内容、书友评论、用户上传文字、图片等其他一切内容及在云上书屋所做之广告均属用户个人行为，与本网站无关。
            </p>
        </div>
		<div class="j3">
			<ul>
				<li class="l1"><a href="#"></a></li>
				<li class="l2"><a href="#"></a></li>
				<li class="l3"><a href="#"></a></li>
				<li class="l4"><a href="#"></a></li>
				<li class="l5"><a href="#"></a></li>
				<li class="l6"><a href="#"></a></li>
			</ul>
		</div>
	</div>
	</div>
	</div>
</body>
<script>
	let bookTypeId=getQueryVariable("bookTypeId");
	function getQueryVariable(variable)
	{
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i=0;i<vars.length;i++) {
			var pair = vars[i].split("=");
			if(pair[0] == variable){return pair[1];}
		}
		return "";
	}

	function search_book(){
		let name = document.getElementById("searchbook").value;
		if(name!=""&&name!=null){
			window.location="/boot/book/index?name="+name+"&bookTypeId="+bookTypeId;
		}
		else{
			window.location="index?"+window.location.search.substr(1);
		}
	}

	function next_page(num){
		let name2 = "${param.name}"
		window.location='/boot/book/index?pageNum='+num+"&name="+name2+"&bookTypeId="+bookTypeId;
	}

	function sendBookId(obj) {
		let bookId = obj.getElementsByClassName("thisBookId")[0].value;
		window.location = '/boot/detail/book?bookId=' + bookId;
	}

	function add_cart(bookId){
			$.get('/boot/car/add',{Id: bookId},function (res) {
				if(res.code=='200') {
					layer.msg('加入购物车成功!')
				}
				else {
					layer.msg("请先进行登陆！")
				}
			})
	}
	function searchPic(){
		window.location='/boot/search/search?bookType=1';
	}

</script>
</html>